<template>
  <setting-public-view
    current="contractSet"
    :nav="contractNav">
    <div class="setting-box-warp" v-loading="loading">
      <div class="contract-manage-header">
        <div>
          <h2>{{$t('contract.setting.contractTemplate.text1')}}</h2>
          <p>{{$t('contract.setting.contractTemplate.text4')}}</p>
        </div>
        <div class="lh-52">
          <el-button type="primary" @click="handleClickNewContract"><i class="iconfont icon-add2"></i>{{$t('common.base.create')}}</el-button>
        </div>
      </div>
      <!-- 合同模板列表 -->
      <div class="contract-setting-template-list">
        <draggable
          v-bind="{ animation: 380, ghostClass: 'ghost' }"
          v-model="contractTemplateList"
          tag="div"
          @change="updateContractTemplateSort"
          class="contract-setting-template-list-group" 
        >
          <contract-card-list 
            class="contract-setting-template-list-group-item" 
            v-for="item in contractTemplateList" 
            :key="item.id" 
            :templateList="item" 
            :typeNum="enableTypeNum" 
            @handleDelete="handleDelete"></contract-card-list>
        </draggable>
      </div>
    </div>

    <!-- 新建合同弹框 -->
    <!-- <contract-dialog ref="newContractRef" @submitSave="submitSave"></contract-dialog> -->
    <contract-create-dialog :contract-list="contractTemplateList" @submitSave="submitSave" :visiable.sync="createVisiable"></contract-create-dialog>
  </setting-public-view>
</template>

<script>
import draggable from 'vuedraggable';
/* components */
import SettingPublicView from '../../../components/settingPublicView';
import ContractDialog from '@src/modules/setting/contract/contractSetting/manage/components/ContractDialog.vue';
import ContractCardList from '@src/modules/setting/contract/contractSetting/manage/components/ContractCardList.vue';
import ContractCreateDialog from '@src/modules/setting/contract/contractSetting/manage/components/ContractCreateDialog.vue'

/* 导航 */
import {contractNav} from '../../../components/settingPublicView/navList.js';
import { saveContractTemplate, getContractTemplateList, contractTemplateSort } from '@src/api/ContractApi.ts';
import { toast } from '@src/util/platform';
import { openAccurateTab } from '@src/util/platform';
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum';

export default {
  name: 'contract-setting',
  data() {
    return {
      contractNav: contractNav||{},
      contractTemplateList: [],
      loading: false,
      createVisiable: false
    }
  },
  mounted() {
    this.getContractTemplate()
  },
  components: {
    draggable,
    [SettingPublicView.name]: SettingPublicView,
    [ContractDialog.name]: ContractDialog,
    [ContractCardList.name]: ContractCardList,
    ContractCreateDialog
  },
  computed: {
    enableTypeNum() {
      return this.contractTemplateList.filter(item => item.enabled).length;
    }
  },
  watch: {},
  methods: {
    // 获取合同模板列表
    async getContractTemplate() {
      this.loading = true;
      try {
        let ret = await getContractTemplateList();

        const { success, message, result } = ret || {};

        if (!success) return toast(message, 'error');

        this.contractTemplateList = result || [];
      } catch (err) {
        console.log('error => fetchFields', err);
      } finally {
        this.loading = false;
      }
    },
    openTab(contractTemplateId) {
      let fromId = window.frameElement?.getAttribute('id');

      openAccurateTab({
        type: PageRoutesTypeEnum.PageContractFlowSetting,
        closeNowPage: true,
        params: `id=${contractTemplateId}`,
        fromId,
      })
    },
    // 新建合同
    handleClickNewContract() {
      // this.$refs.newContractRef.dialogVisible = true;
      // this.$refs.newContractRef?.resetField()
      this.createVisiable = true
    },
    // 保存合同模板
    submitSave(param) {
      try {
        saveContractTemplate({
          ...param,
        }).then(res => {
          let { result, success, message } = res || {};

          if (!success) return toast(message, 'error');
          // this.$refs.newContractRef.handleClickCancel()
          this.createVisiable = false
          this.getContractTemplate();
          
          this.openTab(result);
        });
      } catch (err) {
        console.log('error => 新建保存合同模板失败', err);
      }
    },
    // 删除合同
    handleDelete() {
      this.getContractTemplate()
    },
    // 合同模板拖拽排序
    updateContractTemplateSort() {
      let orderParams = {};
      this.contractTemplateList.map((typeItem, idx) => {
        if (!orderParams[typeItem.id]) orderParams[typeItem.id] = idx + 1;
      });

      contractTemplateSort(orderParams).then(res => {
        let { result, success, message } = res || {};

        if (!success) return toast(message, 'error');
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.setting-box-warp {
  flex-direction: column;
}

.contract-manage-header{
  display: flex;
  justify-content: space-between;
  padding: 20px;
  width: 100%;
  background: #FFFFFF;
  border-radius: 4px;
  margin-bottom: 16px;
  h2{
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 22px;;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #262626;
  }
  p{
    font-size: 12px;
    color: #666666;
    line-height: 20px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #8C8C8C;
    margin-bottom: 0;
  }
  .lh-52{
    line-height: 52px;
  }
}

.contract-setting-template-list {
  height: calc(100% - 100px);
  overflow: auto;

  @include dynamic-card-list(2, 'contract-setting-template-list-group-item');
  &-group {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 100%;
    &-item {
      background-color: #fff;
      margin: 0 12px 12px 0;
      border-radius: 4px;
      box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.08);
    }
  }
}
</style>
